<template>
	<div class="app-container">
		<!--弹窗-->
		<el-dialog :title="secretDialog.title" width="500px" :close-on-click-modal="false"
				:visible.sync="secretDialog.visible" @close="handleClose('secretForm')">
		  <el-form :model="secretDialog.info" :rules="rules" ref="secretForm" label-width="80px">
			<el-form-item label="Account" prop="userId">
				<el-input v-model="secretDialog.info.userId" placeholder="User Account" :disabled="secretDialog.option==1"></el-input>
			</el-form-item>
            <el-form-item label="Old" prop="oldSecret">
            	<el-input v-model="secretDialog.info.oldSecret" type="password" placeholder="Old Login Password"></el-input>
            </el-form-item>
            <el-form-item label="New" prop="newSecret">
            	<el-input v-model="secretDialog.info.newSecret" type="password" placeholder="New Login Password"></el-input>
            </el-form-item>
            <el-form-item label="Renew" prop="reSecret">
            	<el-input v-model="secretDialog.info.reSecret" type="password" placeholder="Repeat New Login Password"></el-input>
            </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="handleClose('secretForm')">取消</el-button>
		    <el-button :loading="loading" type="primary" @click="handleSave('secretForm')">确定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
		  secretDialog: {}
		},
		data() {
            let validateSecret = (rule, value, callback) => {
                let reg = new RegExp(/^(?=.*\d)(?=.*[a-zA-Z]).{8,20}$/);
                if (!reg.test(value)) {
                    callback(new Error('Contains at least 8 to 20 numbers, letters and symbols'));
                } else {
                    callback();
                }
            }
            let validateReSecret = (rule, value, callback) => {
                if (this.secretDialog.info.newSecret!=value) {
                    callback(new Error('Repeat entered password is different'));
                } else {
                    callback();
                }
            }
			return {
				loading: false,
				rules: {
                    oldSecret: [
						{ required: true, message: 'Please enter old login password' },
					    { validator: validateSecret, trigger: 'blur' }
					],
                    newSecret: [
                    	{ required: true, message: 'Please enter new login password' },
                        { validator: validateSecret, trigger: 'blur' }
                    ],
                    reSecret: [
                    	{ required: true, message: 'Please enter repeat new login password' },
                        { validator: validateReSecret, trigger: 'blur' }
                    ],
				}
			}
		},
		methods: {
			handleSave(form) {
				this.$refs[form].validate(valid => {
					if (!valid) {
						return;
					}
					this.loading = true;
					let params = {
                        userId: this.secretDialog.info.userId,
                        userName: this.secretDialog.info.userName,
                        isAdmin: this.secretDialog.info.isAdmin,
                        usable: this.secretDialog.info.usable,
                        secret: this.secretDialog.info.secret
                    };
                    let url = this.secretDialog.option==1? this.api.modifyUser : this.api.appendUser;
					this.$http.fetch(url, params)
						.then(data => {
							this.$message({ message: 'User information is saved successfully!', type: 'success' });

							this.$emit("update"); //更新父组件
							this.handleClose(form); //清空内容
							this.loading = false;
						}).catch(err=> {
                            this.loading = false;
                        });
				});
			},
			handleClose(form) {
				this.secretDialog.visible = false;
				this.secretDialog.info = {};
				this.$refs[form].resetFields(); //重置form
			}
		}
	}
</script>
<style scoped>
	.el-form-item >>> .el-image {
		width: 10rem;
		height: 3rem;
		line-height: 3rem;
		margin-right: 1rem;
		vertical-align: middle;
		text-align: center;
		border: 1px solid #eee;
		color: #999;
	}
</style>
